<!--
 * @Description: 
 * @Author: shilinzhou
 * @Date: 2024-02-01 09:54:31
 * @LastEditors: James324
 * @LastEditTime: 2024-03-14 17:45:13
-->
<script setup lang="ts">
defineOptions({
    name: 'ScheduleDetail'
});

const component = {
    unselfControl: defineAsyncComponent(() => import('./view/Unself-control/index.vue')),
    outsourceControl: defineAsyncComponent(() => import('./view/Outsource-control/index.vue')),
    selfControl: defineAsyncComponent(() => import('./view/Self-control/index.vue'))
};
const activeName = ref<keyof typeof component>('selfControl');
</script>

<template>
    <div class="f-1 f-column">
        <q-page-title class="m-l-16"> 订单号：{{ $route.query.orderNumber }} </q-page-title>
        <div class="work-view">
            <el-tabs v-model="activeName">
                <el-tab-pane label="自制生产" name="selfControl" />
                <el-tab-pane label="委外" name="outsourceControl" />
                <el-tab-pane label="外购" name="unselfControl" />
            </el-tabs>
        </div>

        <q-suspense>
            <component :is="component[activeName]"></component>
        </q-suspense>
    </div>
</template>

<style scoped lang="scss">
@include b(m-page) {
    padding-top: 0;
}
</style>
